<template>
        <!------------------------ Main Navbar ---------------------------------->
        <div class="navbar1">
            <div style="background-color: white;"><img id="l1" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/buttons/logo-pokemon-79x45.png" alt=""></div>
            <div><img id="l2" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/buttons/logo-pokemoncenter-79x45.png" alt=""></div>
            <div><img id="l3" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/buttons/corporate-en.png" alt=""></div>
            <div><img id="l4" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/promotions/swsh12-gus-175-en.jpg" alt=""></div>
            <div><img id="l5" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/promotions/scarlet-violet-175x50-en.jpg" alt=""></div>
            <div><img id="l6" src="https://assets.pokemon.com/assets/cms2/img/misc/gus/promotions/unite-176x50.jpg" alt=""></div>
        </div>
    
        <!------------------------ Second and Third Navbar ---------------------------------->
        <div class="navbar2">
            <div class="largediv">
                <div style="background-color: rgb(146, 145, 145);"><img src="../assets/img/1.png" alt=""></div>
                <div class="a"><img src="../assets/img/2.png" alt=""></div>
                <div id="b"><img src="../assets/img/3.png" alt=""></div>
                <div id="c"><img src="../assets/img/4.png" alt=""></div>
                <div id="d"><img src="../assets/img/5.png" alt=""></div>
                <div id="e"><img src="../assets/img/6.png" alt=""></div>
                <div id="f"><img src="../assets/img/7.png" alt=""></div>
            </div>
        </div>
    
        <div class="navbar3 sticky-top header-transparent">
            <div class="largediv2">
                <div style="border-bottom: 5px solid rgb(146, 145, 145); background-color: rgb(146, 145, 145);">Home</div>
                <div class="a" style="border-bottom: 5px solid rgb(219, 7, 7);"><a href="/card">图鉴</a></div>
                <div id="b" style="border-bottom: 5px solid rgb(219, 151, 25);"><a href="https://twitter.com/Choushunnu">进行关注</a></div>
                <div id="c" style="border-bottom: 5px solid rgb(236, 236, 26);"><a href="/card">集换式卡牌游戏</a></div>
                <div id="d" style="border-bottom: 5px solid green;"><a href="/video">Pokemon TV</a></div>
                <div id="e" style="border-bottom: 5px solid rgb(111, 195, 223);"><a href="/game">Play!宝可梦竞猜</a></div>
                <div id="f" style="border-bottom: 5px solid blue;"><a href="/login">登录</a></div>
            </div>
        </div>
    
        <!--------------------------Body Section---------------------------------------------->
        <div class="di0">
            <div class="di1">
    
    
    
                <div class="di2">
    
                    <div class="card " style="width: 35rem;">
                        <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/watch-pokemon-tv/_tiles/2023/new-animated-series-169.png" class="card-img-top" alt="...">
                        <div id="d1" class="card-body">
                            <h5 class="card-title">洛奇亚 VSTAR 立竿见影</h5>
                            <p class="card-text">找出为什么在拉丁美洲国际锦标赛之后潜水口袋妖怪正在崛起。</p>
    
                        </div>
                    </div>
    
                    <div class="di3">
                        <div class="card mb-3" style="max-width: 400px; height: 150px;">
                            <div class="row g-0">
                                <div class="col-md-6">
                                    <img style="height: 75%; width: 100%;" src="https://www.pokemon.com/static-assets/content-assets/cms2/img/trading-card-game/_tiles/strategy/swsh12/lugia-vstar/swsh12-lugia-vstar-34-en.jpg" class="img-fluid rounded-start" alt="...">
                                </div>
                                <div class="col-md-6">
                                    <div class="card-body" id="d2">
                                        <div class="card-text">
                                            <h5>精灵宝可梦 TCG 攻略：洛奇亚 VSTAR</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="di4">
                        <div class="card" style="width: 19rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/video-games/_tiles/pokemon-go/12152022/02/pokemon-go-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" id="d3">
                                <div class="card-text">
                                    <h5>掌握 Pladea 地区的 Terastal 现象</h5>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="di5">
                        <div class="card" style="width: 19rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/video-games/_tiles/pokemon-go/12142022/pokemon-go-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" id="d4">
                                <div class="card-text">
                                    <h4>神奇宝贝 TCG:朱紫系列</h4>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div style="margin-top: 15px;">
                        <div class="card" style="width: 17rem;height: 320px;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/attend-events/_tiles/2023/pokemon-unite/pokemon-unite-championship-series-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" id="d5">
                                <div class="card-text">
                                    <h5>2023 年的社区活动</h5>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="di6">
                        <div class="card" style="width: 17rem; height: 320px;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/misc/_tiles/pokemon-center/12162022/pokemon-center-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" id="d6">
                                <div class="card-text">
                                    <h5>Whitney 和 Sawsbuck 抵达露台</h5>
                                </div>
                            </div>
                        </div>
                    </div>
    
                </div>
    
                <!------------------------- Carousel-------------------------------------------->
                <!-- <div>
          <img height="270px" width="100%" src="../assets/img//Carousel.png" alt="">
        </div> -->
    
                <section4>
                    <div class="button-carosuel justify-content-center mt-2">
                        <button class="button-carosuel1"> <img  alt=""> Featured Pokémon</button>
                    </div>
                    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="cardspok">
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic1.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter / Iron Fist</p>
                                        </div>
                                    </div>
    
                                    <div class="poke">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic2.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Shukle</p>
                                            <p class="righ">213</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto1">Bug</button>
                                            <button class="buto2">Rock</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Gulottony / Sturdy</p>
                                        </div>
                                    </div>
    
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic3.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Victreebel</p>
                                            <p class="righ">71</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto1">Grass</button>
                                            <button class="buto2">Poison</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Chlorophyll</p>
                                        </div>
                                    </div>
    
    
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic4.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Dhelmise</p>
                                            <p class="righ">781</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto1">Ghost</button>
                                            <button class="buto2">Grass</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">steelworker</p>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cardspok">
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic5.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                    <div class="poke">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic6.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic7.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
    
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic8.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="cardspok">
                                    <div class="poke ">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic9.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                    <div class="poke">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic10.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
    
                                    <div class="poke">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic1.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                    <div class="poke">
                                        <div class="Pokeimg"><img width="100%" src="../assets/img/pic5.png" alt=""></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Crawbrawler</p>
                                            <p class="righ">7539</p>
                                        </div>
                                        <div class="detail d-flex">
                                            <p class="lef">Type</p> <button class="buto">Fighting</button></div>
                                        <div class="detail d-flex">
                                            <p class="lef">Abilities</p>
                                            <p class="car-rig">Hyper cutter/Iron Fist</p>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                   <span class="visually-hidden">Previous</span>
                 </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                   <span class="carousel-control-next-icon" aria-hidden="true"></span>
                   <span class="visually-hidden">Next</span>
                 </button>
                        </div>
                    </div>
    
                    <div><button class="explore"><a href="https://www.pokemon.com"> 探索更多宝可梦</a></button></div>
    
    
                </section4>
    
    
    
    
    
                <!---------------------------- Second Body--------------------------------------------------->
                <div class="di7">
                    <div class="abc">
                        <div class="card" style="width: 18rem; height: 400px;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/watch-pokemon-tv/_tiles/stunts/ashs-greatest-triumphs/ashs-greatest-triumphs-169-en.png" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color: rgb(173, 173, 14);">
                                <h3>宝可梦战斗策略</h3>
                                <p class="card-text">学习如何捕捉和使用传说中的钢系和格斗系神奇宝贝</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc1">
                        <div class="card" style="width: 18rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/video-games/_tiles/strategy/scarlet-violet/terastallization/scarlet-violet-169-en.gif" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color: rgb(34, 177, 34);">
                                <h3>2023 年神奇宝贝 TCG 标准格式轮换和神奇宝贝工具表</h3>
                                <p class="card-text">2023 年神奇宝贝 TCG 锦标赛系列赛季将于 2023 年 4 月 14 日生效。</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc2">
                        <div class="card" style="width: 18rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/trading-card-game/_tiles/sv/announce/sv-announce-169-en.jpg" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color: rgb(122, 22, 216);">
                                <h3>宝可梦剑盾——银色风暴三重奏： Ho-Oh V, Chesnaught V, and Wailord</h3>
                                <p class="card-text">Cool Collectible 卡片也可以制作有趣的套牌，专家展示了如何使用。</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc3">
                        <div class="card" style="width: 18rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/video-games/_tiles/pokemon-go/12152022/01/pokemon-go-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color: rgb(82, 185, 219);">
                                <h3>Urshifu 与全新的战斗通行证一起闯入神奇宝贝 UNITE</h3>
                                <p class="card-text">准备好迎接新的Holowear、强大的全能近战武器了吗</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc4">
                        <div class="card" style="width: 18rem; height: 105px; border: 1px solid white;">
                            <div class="card-body">
                                <div class="card-text">
                                    <h2 style="color: gray;">What's New This Week</h2>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc5">
                        <div class="card" style="width: 18rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/video-games/_tiles/pokemon-masters/12152022/pokemon-masters-ex-169.jpg" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color:rgb(158, 128, 88) ;">
                                <h3>精灵宝可梦 TCG：剑盾——银色暴风雨艺术品风暴</h3>
                                <p class="card-text">迷人的卡片庆祝大自然、口袋妖怪世界的奇迹</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc6">
                        <div class="card" style="width: 18rem;">
                            <img src="https://www.pokemon.com/static-assets/content-assets/cms2/img/attend-events/_tiles/2023/tcg-rotation/2023-tcg-rotation-169-en.jpg" class="card-img-top" alt="...">
                            <div class="card-body" style="background-color: gray;">
                                <h3>享受 Pokémon Master Journeys：Pokémon TV 系列</h3>
                                <p class="card-text">Ash 和 Goh 在神奇宝贝世界的持续冒险的前四集现已推出。</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="abc7">
                        <div class="card" style="width: 18rem;">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item" style="height: 50px; background-color:rgb(202, 82, 61);">
                                    <h3>View All News</h3>
                                </li>
                                <li class="list-group-item" style="background-color: rgb(82, 185, 219);">Keep up with all the latest developements!</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
    
        <div class="footer">
            <div style="margin-left: 16%; width: 25%;">
                <h3>The Pokemon Company</h3>
                <ul class="hfooter">
                    <li>What's New</li>
                    <li>Pokémon Parent Guide</li>
                    <li>Cutomer Services</li>
                    <li>About Our Company</li>
                    <li>Pokémon Careers</li>
                    <li>Select a Country/Region</li>
                    <li>Pokémon Press Site</li>
                </ul>
            </div>
    
            <div class="line1">
            </div>
    
            <div class="fdiv">
                <ul>
                    <li><img width="30px" src="https://www.freepnglogos.com/uploads/facebook-logo-icon/facebook-logo-icon-file-facebook-icon-svg-wikimedia-commons-4.png" alt=""> </li>
                    <li><img width="40px" height="35px" src="https://www.freepnglogos.com/uploads/youtube-play-red-logo-png-transparent-background-6.png" alt=""></li>
                    <li><img width="30px" src="https://toppng.com/uploads/preview/twitter-icon-twitter-logo-png-square-11562979688lurcfovxzs.png" alt=""></li>
                    <li><img width="30px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/640px-Instagram_icon.png" alt=""></li>
                    <li><img width="30px" src="https://www.freepnglogos.com/uploads/pinterest-logo-p-png-0.png" alt=""></li>
                </ul>
            </div>
    
            <div class="line2">
            </div>
    
            <div class="fdiv2">
                <img width="130px" src="../assets/img//logo-footer.png" alt="">
                <ul>
                    <li><a href="">Term of use</a></li>
                    <li><a href="">Privacy Notes</a></li>
                    <li><a href="">Cookie Page</a></li>
                    <li><a href="">Legal Info</a></li>
                    <li><a href="">Security</a></li>
                </ul>
                <p>©2022 Pokémon. ©1995 - 2022 Nintendo/Creatures Inc./GAME FREAK inc. TM, ®Nintendo</p>
            </div>
    
    
        </div>    
</template>

<script>
    import "@/assets/js/index"
    export default {
        
    }
</script>

<style scoped>
@import url(../assets/css/1.css);
@import url(../assets/css/style.css);
</style>